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	Edit Off- 


	<html><head><title>Your Website</title>

	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

	<link rel="stylesheet" href="css/styles.css">

	<style>	

	</style>

	</head>
	<body>

	<header>

	<nav>
								<!--Menu icon when screen switches to mobile view-->
						<a href="#" id="menu-icon"></a>
		
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="top5.html">Top 5</a></li>
				<li><a href="Give me Your Money.html">Give Me Your Money</a></li>
		</ul>
		
			</nav>
		</header>

		<section>
	
		<h1>About Me!</h1>
		
		<img class="img-main" src="images/cobra.png" />
		
		<br /><br />

		<div class="writing-area">  
		<h2>Introducing hi...</h2>
		<p>
		<img class="img-left" src="images/cobra.png" />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
		eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Egestas tellus rutrum tellus pellentesque eu tincidunt. Risus 
		viverra adipiscing at in tellus. Eu tincidunt tortor aliquam 
		nulla facilisi. Commodo odio aenean sed adipiscing diam donec 
		adipiscing. Purus semper eget duis at tellus at urna. Dolor sit 
		amet consectetur adipiscing. Dolor magna eget est lorem ipsum 
		dolor. Amet consectetur adipiscing elit ut aliquam purus sit 
		amet. Dictumst quisque sagittis purus sit amet volutpat. Arcu odio 
		ut sem nulla pharetra diam sit amet nisl. Orci dapibus 
		ultrices in iaculis nunc. Massa tincidunt nunc pulvinar sapien 
		et ligula ullamcorper malesuada. Pulvinar etiam non quam lacus 
		suspendisse faucibus interdum posuere lorem. Sed libero enim sed 
		faucibus turpis. Consequat semper viverra nam libero justo laoreet. 
		Enim eu turpis egestas pretium aenean pharetra magna a c. Facilisis 
		mauris sit amet massa vitae tortor condimentum lacinia. Ac turpis 
		egestas integer eget aliquet. Amet massa vitae tortor condimentum 
		lacinia.Pulvinar etiam non quam lacus suspendisse faucibus interdum 
		posuere lorem. Sed libero enim sed faucibus turpis. Consequat semper 
		viverra nam libero justo laoreet. Enim eu turpis egestas pretium aenean 
		pharetra magna a c. Facilisis mauris sit amet massa vitae tortor condimentum 
		lacinia. Ac turpis egestas integer eget aliquet. Amet massa 
		vitae tortor condimentum lacinia. onsequat semper viverra nam libero justo 
		<img class="img-right" src="images/cobra.png" />
		laoreet. Enim eu turpis egestas pretium aenean pharetra magna a
		c. Facilisis mauris sit amet massa vitae tortor condimentum 
		lacinia. Ac turpis egestas integer eget aliquet. Amet massa 
		vitae tortor condimentum lacinia. onsequat semper viverra nam libero justo
		laoreet. Enim eu turpis egestas pretium aenean pharetra magna a
		c. Facilisis mauris sit amet massa vitae tortor condimentum 
		lacinia. Ac turpis egestas integer eget aliquet. Amet massa 
		vitae tortor condimentum lacinia. onsequat semper viverra nam libero justo 
		laoreet. Enim eu turpis egestas pretium aenean pharetra magna a
		c. Facilisis mauris sit amet massa vitae tortor condimentum 
		lacinia. Ac turpis egestas integer eget aliquet. Amet massa 
		vitae tortor condimentum lacinia. onsequat semper viverra nam libero justo 
		laoreet. Enim eu turpis egestas pretium aenean pharetra magna a
		c. Facilisis mauris sit amet massa vitae tortor condimentum 
		lacinia. Ac turpis egestas integer eget aliquet. Amet massa 
		vitae tortor condimentum lacinia.
		</p>
		</p>
		
		
		
		</div><!--closes writing-area -->
		
		
	</section>

		</body></html>






	End-




















----------------------------------------------------------------------------------------------------------------------------Style----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


/*RESET-when page loads resets for proper viewing*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN CODE FOR BODY*/
body { 
	font-size: 1.25em; /*20px*/
	line-height: 1.25em; /*line spacing equal to 20px*/
	font-family: arial;
	background: ##8EE5EE;/*background color*/
	color: ##009ACD;/*font color*/
}

/*controls for top area of page-header*/
header {
	background: #8EE5EE; /*background color of header*/
	width: 100%; /*100% of screen area*/
	height: 76px;
	position: fixed; /*stays in place*/
	top: 0; /*top margin*/
	left: 0; /*left margin*/
	border-bottom: 4px #009ACD; /*border on bottom of link area*/
	z-index: 100; /*position of area on top of other items*/
}

/*Link area settings*/
/*leave this*/
nav {
	float: right;
	padding: 20px;
}

/*Main link controls*/
a {
	color: #aqua;
	text-decoration: none;
	font-weight: bold;
}
/*Link HOVER*/
a:hover {
	color: blue;
	text-decoration:none;
}

/***Mobile menu icon controls***/
/*leave this*/
#menu-icon {
	display: hidden; /*hidden until @media activates*/
	width: 40px;
	height: 40px;
	background: blue url(../images/menu-icon.png) center;
}

/*when person touches or mouse goes over mobile icon on smaller screen*/
a:hover#menu-icon {
	background-color: #009ACD;
	border-radius: 4px 4px 0 0;
}

ul {
	list-style: none;
}

li {
	display: inline-block;
	float: left;
	padding: 10px;
}

/***Setup of SECTION area where items show on page***/
section {
	margin: 80px auto 40px;
	max-width: 1200px; /*width of display area*/
	position: static;
	padding: 20px
}

/*****************Image controls*******************/

/**main image on page-centered**/
.img-main {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	border:2px solid blue;
	border-radius:15%;
}

/**small image on page-centered**/
.img-small {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	border:2px solid blue;
	border-radius:15%;
}

/***left image***/
.img-left{
	width:45%;
	border:1px #009ACD;
	float:left;
	margin-right:7px;
	margin-top:0px;
}

/***right image***/
.img-right{
	width:45%;
	border:1px #009ACD;
	float:right;
	margin-left:7px;
	margin-top:0px;
}

/*************Header styles**************/
h1 {
	color:blue;
	font-size: 2em;
	color: #2262AD;
	line-height: 1.15em;
	margin: 20px 0 ; /* top and bottom-20px--right and left 0px*/
	text-align:center;
}

h2{
	color:#009ACD;
	font-family:tahoma;
	font-style:italic;
	font-size:35px;
	padding-bottom:25px; /*space under h2*/
	text-align:center;
}

/*************Writing styles***************/

/**Generic <p> writing style**/
p {
	line-height: 1.5em; /*spacing between sentences*/
	font-size:25px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom: 10px;
	color:#009ACD;
}

/**Makes first letter differnt**/
/*connect using class="p1" inside writing tags*/
.p1::first-letter {
	font-size:55px;
	font-family:monotype corsiva;
	font-style:italic;
	color:blue;
}
/**Makes first line different**/
.p1::first-line {
	font-size:30px;
	font-style:italic;
}

/**used on about.html page**/
.writingArea {
	margin-top:15px;
	margin-bottom:15px;
	margin-left:60px;
	margin-right:60px;
}

/********************Column Structure**************/

* {
	box-sizing: border-box;
}

/*Sets up area on page for columns*/
.col-container {
	display: table;
	width: 100%;
	/*word-wrap: break-word;*/
 
}
/*First column controls*/
.col_1 {
	display: table-cell;
	padding: 16px;
	width:65%;
	background:#DCDCDC;
	/*text-align: justify;*/
	/*text-justify: inter-word;*/
}

/*Second column controls*/
.col_2 {
	display: table-cell;
	padding: 16px;
	width:35%;
	background:#CCCCCC;
	/*text-align: justify;*/
	/*text-justify: inter-word;*/
}

/*****MEDIA QUERY-changes website for mobile or smaller screens*****/
@media only screen and (max-width : 800px) {

/*Main page @ media controls*/
header {
	position: fixed; /*stays in the same place*/
}

#menu-icon {
	display:inline-block;
}

nav ul, nav:active ul { 
	display: none;
	position: fixed; /*absolute if you want it to move*/
	padding: 20px; /*space inside of menu box*/
	background: #$indigo-500; /*background color of mobile menu*/
	border: 5px solid #444;
	right: 20px; /*leave this*/
	top: 60px; /*leave this*/
	width: 35%; /*width of menu box*/
	border-radius: 20px 0 20px 20px;
}
/*leave this*/
nav li {
	text-align: center;
	width: 100%;
	padding: 10px 0;
	margin: 0;
}
/*leave this*/
nav:hover ul {
	display: block;
}
	
/*************@Media Image Structure*******************/

.img-main {
	width: 100%;
}

/*change when in mobile*/
.img-left{
	width:100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border:$indigo-500;
}

/*change when in mobile*/
.img-right{
	width:100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border:1px $indigo-500;
}
 
	
/*************@ Media Column Structure*****************/
/*change when in mobile*/
  .col_1 {
    display: block;
    width: 100%;
  }
/*change when in mobile*/
.col_2 {
    display: block;
    width: 100%;
}
 

	
}/*closes @media*/
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